<script setup>
import { onMounted, provide, ref } from "vue";
import Soncom from "./components/SonCom.vue";

const h1Ref = ref(null);

onMounted(() => {
  console.log(h1Ref.value);
});
const getDom = () => {
  console.log(h1Ref.value);
};

const message = ref("hello word");
const sonComRef = ref(null);
const getSonCom = () => {
  sonComRef.value.validate();
};

provide("myMsg", message);
provide("myStr", "哈？");
provide("setMyMsg", () => {
  message.value += "1111";
});
</script>
<template>
  <!-- 结构 -->
  <div>
    <!-- 1. 给组件添加ref属性，用于获取dom节点 -->
    <h1 ref="h1Ref">Hello word</h1>
    <button @click="getDom">点击获取</button>

    <Soncom :msg="message" ref="sonComRef" />
    <button @click="getSonCom">获取组件实例</button>

    <button @click="message += '!'">修改数据</button>
  </div>
</template>

<style>
/* 样式 */
</style>
